<style type="text/css">
    .historyLink {
        display:block;
        text-align: center;
    }
    .message__bubble {
        float: left;
        position: relative;
        display: inline-block;
        margin: .1em .75em;
        padding: .1em .5em;
        border-radius: 1.5em;
        text-shadow: 0 1px 1px white;
        background-color: #F5F4F1;
        border: 1px solid #CDCDCA;
        box-shadow: 0   1px   1px 0  #CDCDCA;
        overflow: hidden;
        max-width: 300px;
        word-wrap: break-word;
    }
    .message__bubble--send {
        float: right;
        position: relative;
        display: inline-block;
        margin: .1em .75em;
        padding: .1em .5em;
        border-radius: 1.5em;
        text-shadow: 0 1px 1px white;
        background-color: #F5F4F1;
        border: 1px solid #CDCDCA;
        box-shadow: 0   1px   1px 0  #CDCDCA;
        overflow: hidden;
        max-width: 300px;
        word-wrap: break-word;
    }
    .message--send {
        float: right;
    }
    .message__avatar {
        position: relative;
        display: block;
        float: left;
        width: 2.5em;
        height: 2.5em;
        border-radius: .3em;
        margin: 0 .5em 0 0;
        overflow: hidden;
    }
    .message__avatar_send {
        position: relative;
        display: block;
        float: right;
        width: 2.5em;
        height: 2.5em;
        border-radius: .3em;
        margin: 0 .5em 0 0;
        overflow: hidden;
    }
    .message__avatar_send img {
        width: inherit;
        height: inherit;
    }
    .message__avatar_send:before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 0 0.125em #1a1a1a inset, 0 0 0.312em #1a1a1a inset;
    }
    .message__avatar:before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 0 0.125em #1a1a1a inset, 0 0 0.312em #1a1a1a inset;
    }
    .message__avatar img {
        width: inherit;
        height: inherit;
    }
    .message__bubble:after, .message__bubble--send:after {
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: inherit;
        background: radial-gradient(40% 5px at 50% 5px, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0));
    }
    .message__bubble--send {
        background-color: #E9F2DC;
        border: 1px solid #B7C8A1;
    }
    .message__bubble--send:after {
        background: radial-gradient(40% 5px at 50% 5px, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0));
    }
    .message__avatar {
        margin-right: 0;
    }
    .cf:before,
    .cf:after {
        content: " ";
        /* 1 */
        display: table;
        /* 2 */
        height: 10px;
    }

    .cf:after {
        clear: both;
    }

</style>
<ion-view view-title="{{title}}" cache-view="false">
    <ion-nav-buttons side="left">
        <a class="button button-icon ion-arrow-left-c" ng-click="goBack()"></a>
    </ion-nav-buttons>

    <!--<ion-nav-buttons side="right">-->
        <!--<button class="button button-icon ion-navicon" ng-click="toggleRight()"-->
                <!--ng-hide="$exposeAside.active"></button>-->
    <!--</ion-nav-buttons>-->

    <ion-side-menus>
        <ion-side-menu side="right" width="chatConfig.devWidth">
            <ion-content class="padding has-header has-footer" delegate-handle="chat-handle">
                <a href="" class="historyLink" ng-click="loadHistory(chatDetail.chatId, chatDetail.messages)"
                   ng-show="chatDetail.showHistoryMessageLink">查看历史消息</a>

                <div id="mainMessages" message-data scroll="chatDetail.scrollTopOrBottom" detail-messages="chatDetail.messages"
                     detail-users="chatDetail.users" self-id="{{user.uid}}" refresh="chatDetail.refresh"></div>
            </ion-content>
            <ion-footer-bar class="bar-stable item-input-inset" keyboard-attach>
                <label class="item-input-wrapper">
                    <textarea ng-model="chatDetail.sendMsg" required minlength="1" rows="1" maxlength="140"
                              style="height: 35px; width:100%" ng-disabled="chatDetail.fileSelected"></textarea>
                </label>

                <div class="footer-btn-wrap">
                    <!--<input type="file" id="file" style="display:none" onchange="angular.element(this).scope().onFileSelected()">-->
                    <!--<input type="file" id="file" style="display:none" on-file-changed="onFileSelected">-->
                    <!--<button class="button icon ion-filing" ng-click="openFileDialog()"></button>-->
                    <button class="button button-icon icon ion-android-send footer-btn" type="submit"
                            ng-click="sendMessageOrFile()">
                    </button>
                </div>
            </ion-footer-bar>
        </ion-side-menu>
        <ion-side-menu-content>
            <ion-content class="padding has-header">
                <ion-list ng-if="chatConfig.appName=='nonghua'&&isFarmer(user.roles)">
                    <ion-item class="item item-icon-left" ng-click="openChatDetail({{user.uid*2}},'在线咨询')">
                        <i class="icon ion-chatbubbles"></i> 在线咨询
                    </ion-item>
                    <ion-item class="item item-icon-left" ng-click="openChatDetail({{user.uid*2+1}},'在线投诉')">
                        <i class="icon ion-android-call"></i> 在线投诉
                    </ion-item>
                </ion-list>
                <ion-list ng-if="chatConfig.appName=='nonghua'&&isEmployee(user.roles)||chatConfig.appName!='nonghua'">
                    <ion-item class="item-remove-animate item-avatar item-icon-right"
                              ng-repeat="(chatKey, chatValue) in chats track by chatKey" type="item-text-wrap"
                              ng-click="openChatDetail(chatKey,chatValue.title)">
                        <img ng-src="{{::getChatViewPic(chatValue, user.uid)}}">

                        <h2>{{::chatValue.title}}</h2>
                        <!--<p>{{chat.lastText}}</p>-->
                        <last-message messages="chatValue.messages" index="$index" users="chatValue.user"
                                      self-id={{::user.uid}}
                                      chat-id="chatKey" current-chat-id="chatDetail.chatId"></last-message>
                        <i class="icon ion-chevron-right icon-accessory"></i>

                        <!--<ion-option-button class="button-assertive" ng-click="remove(chat)">-->
                        <!--Delete-->
                        <!--</ion-option-button>-->
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu-content>
    </ion-side-menus>
</ion-view>

